<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档流</title>
    <style>
        img{
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div>
        <p>文档流：是指文档在可显示对象在排列时所占用的位置/空间。<br>例如：块元素自上而下摆放，内联元素，从左到右摆放。</p>
        <p>标准流（完全遵循元素的默认摆放位置）里面的限制非常多，导致很多页面效果无法实现。</p>
        <p>例如：高矮不齐、底边对齐、空白折叠现象：无论多少个空格、换行、tab，都会折叠成一个空格，如果我们想让img标签之间没有空隙，必须紧密连接。</p>
        <p>解决这些问题的办法是脱离文档流。<br>脱离文档流主要有 3种方案：</p>
        <p>浮动、绝对定位、固定定位。</p>
    </div>
    <div>
        <span>大家好，我们一起来看美图。</span>
        <img src="./image/4.jpg" alt="">
    </div>
</body>
</html>